<template>
  <div class="home-nav">
    <!--<ul class="area" v-if="home.nav && home.nav.data">-->
    <!--  <li-->
    <!--    v-for="(item, index) in home.nav.data"-->
    <!--    :key="index"-->
    <!--    class="area-item"-->
    <!--    :class="{'more': +home.nav.total === 5}"-->
    <!--    @click="handleClick(item)">-->
    <!--    <span class="image" v-if="item.image && item.image.path" >-->
    <!--      <img :src="item.image.path"/>-->
    <!--    </span>-->
    <!--    <span class="name">{{ item.name }}</span>-->
    <!--  </li>-->
    <!--</ul>-->
    <div class="two" v-if="false">
      <div class="left image">
        <img :src="home[0].image.path" v-if="home && home[0] && home[0].image" @click="handleClick(home[0])" />
      </div>
      <div class="right">
        <div class="image">
          <img :src="home[1].image.path" v-if="home && home[1] && home[1].image" @click="handleClick(home[1])" />
        </div>
        <div class="image">
          <img :src="home[2].image.path" v-if="home && home[2] && home[2].image" @click="handleClick(home[2])"/>
        </div>
      </div>
    </div>
    <div class="grid" v-if="true">
      <div class="item item1 ">
        <img :src="home[0].image.path" v-if="home && home[0] && home[0].image" @click="handleClick(home[0])" />
      </div>
      <div class="item item2 image">
        <img :src="home[1].image.path" v-if="home && home[1] && home[1].image" @click="handleClick(home[1])" />
      </div>
      <div class="item item3 image">
        <img :src="home[2].image.path" v-if="home && home[2] && home[2].image" @click="handleClick(home[2])"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeNav',
  props: ['home'],
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      const url = item.wx_url
      if (url && url.length > 0) {
        this.$router.push(url)
      }
    }
  },
  created () {
    // console.log(this.home.nav.total)
  }
}
</script>

<style scoped lang="stylus">
.grid
  display grid
  grid-template-columns auto 185px
  grid-template-rows 71px 71px
  grid-gap 2px
  margin 0 15px
  .item
    //background red
    //padding 50px
    text-align center
    //img
    //  object-fit fill
    &.item1
      //background yellow
      //gird-row 1 / 3
      //gird-column 1 / 2
      grid-row 1 / 3
      position relative
      overflow hidden
      img
        position absolute
        display block
        max-width 100%
        min-height 100%
        top 50%
        left 50%
        transform translate(-50%, -50%)
    //&.item2
      //background blue
      //grid-row 1 / 2
      //gird-column 2 / 3
    //&.item3
      //background black
      //grid-row 2 / 3
      //gird-column 2 / 3
.two
  //height 134px
  padding 0 15px
  display flex
  .left
    width 174px
    height 100%
    background red
    img
      object-fit fill
  .right
    flex 1
    display flex
    flex-direction column
    justify-content space-between
    .image
      flex 1
      img
        max-width 100
        height auto
        object-fit cover
.home-nav
  //margin 10px
  .area
    display flex
    flex-wrap wrap
    //background white
    //margin-bottom 10px
    //border-radius 5px
    padding 10px
    .area-item
      &.more
        // 每行排5个
        width 20%
      // 每行排4个
      width 25%
      margin-bottom 5px
      //background red
      display flex
      flex-direction column
      justify-content space-between
      .image
        //padding 25px
        padding 15px
        // 控制高度
        flex 1
        //img
        //  border-radius 50%
      .name
        //color $main_color
        font-size 14px
        color #000
        font-weight 700
        height 30px
        line-height 30px
        margin-top -10px

</style>
